<template>
  <div class="example-wrap">
    <wu-table :table-module="tableModule">
      <template #date="scope">自定义：{{ scope.row.date }}</template>
      <template #status="scope">
        <el-switch
          v-model="scope.row.status"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </template>
    </wu-table>

    <el-dialog v-model="dialogFormVisible" title="Shipping address">
      <el-form :model="form">
        <el-form-item label="Promotion name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Zones" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="Please select a zone">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { tableModuleType } from '@/types/wu-table'

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    status: 1,
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    status: 0,
    address: 'No. 189, Grove St, Los Angeles'
  }
])
const columns = ref([
  { prop: 'name', label: '名称' },
  { prop: 'date', label: '日期', slotName: 'date' },
  { prop: 'status', label: '禁用状态', slotName: 'status' },
  { prop: 'address', label: '地址', minWidth: '150px' },
  {
    label: '操作',
    width: '300px',
    actions: [
      {
        text: '新增',
        icon: 'Plus',
        type: 'primary',
        clickFun: (scope) => {
          dialogFormVisible.value = true
        }
      },
      {
        text: '编辑',
        icon: 'Edit',
        type: 'warning',
        clickFun: (scope) => {
          console.log('action-编辑-clickFun', scope)
          dialogFormVisible.value = true
        }
      },
      {
        text: '删除',
        icon: 'Delete',
        type: 'danger',
        clickFun: (scope) => {
          console.log('action-删除-clickFun', scope)
          dialogFormVisible.value = true
        }
      }
    ]
  }
])

const tableModule = reactive<tableModuleType>({
  staticTableData: tableData.value,
  columns: columns.value
})
// 弹出相关
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})
</script>

<style lang="scss" scoped></style>
